<!-- <style>
  .second-card-warp {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .second-card-warp .second-card-warp-row {
    width: 100%;
    display: flex;
    gap: 15px;
  }

  .second-card-warp .second-card-warp-col {
    flex: 1
  }

  .second-card-inupt {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .second-card-inupt .second-card-inupt_txt {
    height: 100%;
    flex: 1;
    width: 100%;
  }

  .second-card-error-msg {
    display: none;
    color: red;
    text-align: left;
    line-height: 24px;
  }

  .second-error-shape {
    border: 2px solid red;
  }
</style>
<form
  action="https://wen-test-biling.oemsaas.cn/checkouts/payment/cloveriframe/doPay?order_number=tttttttt20231030SVS30873"
  method="post" id="clover-form">

  <div class="second-card-warp">
    <div class="second-card-warp-row">
      <div class="second-card-warp-col">
        <div class="second-card-inupt" id="CARD_NUMBER"></div>
        <span class="second-card-error-msg"></span>
      </div>
    </div>
    <div class="second-card-warp-row">
      <div class="second-card-warp-col">
        <div class="second-card-inupt" id="CARD_DATE"></div>
        <span class="second-card-error-msg"></span>
      </div>
      <div class="second-card-warp-col">
        <div class="second-card-inupt" id="CARD_CVV"></div>
        <span class="second-card-error-msg"></span>
      </div>
      <div class="second-card-warp-col">
        <div class="second-card-inupt" id="CARD_POSTAL_CODE"></div>
        <span class="second-card-error-msg"></span>
      </div>
    </div>
  </div>
  <div id="clover-button" style="margin-top: 15px;"></div>
</form>

<script>

  $(function () {
    let clover;
    let cloverToken = "";
    function showError(event) {
      for (const key in event) {
        if (Object.hasOwnProperty.call(event, key)) {
          const element = event[key];
          let errorMsg = ""
          if (Object.hasOwnProperty.call(element, 'touched')) {
            if (element.touched) {
              errorMsg = element.error
            }
          } else {
            errorMsg = element
          }

          if (errorMsg) {
            $("#" + key).addClass("second-error-shape")
            $("#" + key).siblings(".second-card-error-msg").text(errorMsg).css('display', 'block');
          }
        }
      }
    }
    $.createPaymentCard({
      src: "https://checkout.sandbox.dev.clover.com/sdk.js",
      button: "#clover-button",
      form: "#clover-form",
      async scriptSuccess({ disableButton, enabledButton }) {
        disableButton();
        clover = new Clover("5e649743b2df373cafc691af9860a8d5");
        const elements = clover.elements();
        const styles = {
          body: {
            margin: "0"
          },
          input: {
            fontSize: '14px',
            height: "48px"
          },
          '.brand': {
            "top": "50%",
            "marginTop": "-15px"
          }
        };
        const cardNumber = elements.create('CARD_NUMBER', styles);
        const cardDate = elements.create('CARD_DATE', styles);
        const cardCvv = elements.create('CARD_CVV', styles);
        const cardPostalCode = elements.create('CARD_POSTAL_CODE', styles);

        cardNumber.mount('#CARD_NUMBER');
        cardDate.mount('#CARD_DATE');
        cardCvv.mount('#CARD_CVV');
        cardPostalCode.mount('#CARD_POSTAL_CODE');

        function cardFocusChange(id, event) {
          $("#" + id).removeClass("second-error-shape")
          $("#" + id).siblings(".second-card-error-msg").css('display', 'none');
        }

        cardNumber.addEventListener('focus', cardFocusChange.bind(null, 'CARD_NUMBER'));
        cardNumber.addEventListener('blur', showError);

        cardDate.addEventListener('focus', cardFocusChange.bind(null, 'CARD_DATE'));
        cardDate.addEventListener('blur', showError);

        cardCvv.addEventListener('focus', cardFocusChange.bind(null, 'CARD_CVV'));
        cardCvv.addEventListener('blur', showError);

        cardPostalCode.addEventListener('focus', cardFocusChange.bind(null, 'CARD_POSTAL_CODE'));
        cardPostalCode.addEventListener('blur', showError);

        const loadCardTypes = ['CARD_NUMBER', 'CARD_DATE', 'CARD_CVV', 'CARD_POSTAL_CODE'];
        window.addEventListener("message", function (event) {
          if (event.origin === "https://checkout.sandbox.dev.clover.com") {
            const cloverData = JSON.parse(event.data);
            loadCardTypes.splice(loadCardTypes.indexOf(cloverData.sender), 1)
            if (!loadCardTypes.length) {
              enabledButton()
            }
          }
        })

      },
      async verified() {
        const result = await clover.createToken();
        if (result.errors) {
          showError(result.errors)
          return false
        }
        cloverToken = result.token;
        return true
      },
      submit({ showLoading, hideLoading }) {
        if (!cloverToken) {
          return false
        }
        showLoading();
        var form = document.getElementById('clover-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'cloverToken');
        hiddenInput.setAttribute('value', cloverToken);
        form.appendChild(hiddenInput);
        form.submit();
      }
    })
  })
</script> -->
<!-- 
<script src="https://checkout.sandbox.dev.clover.com/sdk.js"></script>
<script>
  const clover = new Clover("5e649743b2df373cafc691af9860a8d5");
  const elements = clover.elements();
  const styles = {
    body: {
      fontFamily: 'Roboto, Open Sans, sans-serif',
      fontSize: '16px',
    },
    input: {
      fontSize: '16px',
    },
  };
  const cardNumber = elements.create('CARD_NUMBER', styles);
  const cardDate = elements.create('CARD_DATE', styles);
  const cardCvv = elements.create('CARD_CVV', styles);
  const cardPostalCode = elements.create('CARD_POSTAL_CODE', styles);

  cardNumber.mount('#card-number');
  cardDate.mount('#card-date');
  cardCvv.mount('#card-cvv');
  cardPostalCode.mount('#card-postal-code');

  const cardResponse = document.getElementById('card-response');

  const displayCardNumberError = document.getElementById('card-number-errors');
  const displayCardDateError = document.getElementById('card-date-errors');
  const displayCardCvvError = document.getElementById('card-cvv-errors');
  const displayCardPostalCodeError = document.getElementById('card-postal-code-errors');

  // Handle real-time validation errors from the card Element.
  cardNumber.addEventListener('change', function (event) {
    console.log('cardNumber changed ' + JSON.stringify(event));
  });

  cardNumber.addEventListener('blur', function (event) {
    console.log('cardNumber blur ' + JSON.stringify(event));
  });

  cardDate.addEventListener('change', function (event) {
    console.log('cardDate changed ' + JSON.stringify(event));
  });

  cardDate.addEventListener('blur', function (event) {
    console.log('cardDate blur ' + JSON.stringify(event));
  });

  cardCvv.addEventListener('change', function (event) {
    console.log('cardCvv changed ' + JSON.stringify(event));
  });

  cardCvv.addEventListener('blur', function (event) {
    console.log('cardCvv blur ' + JSON.stringify(event));
  });

  cardPostalCode.addEventListener('change', function (event) {
    console.log('cardPostalCode changed ' + JSON.stringify(event));
  });

  cardPostalCode.addEventListener('blur', function (event) {
    console.log('cardPostalCode blur ' + JSON.stringify(event));
  });

  // TODO: Register event handlers
  const form = document.getElementById('payment-form');
  form.addEventListener('submit', function (event) {
    event.preventDefault();

    clover.createToken()
      .then(function (result) {
        if (result.errors) {
          Object.values(result.errors).forEach(function (value) {
            console.log(value);
          });
        } else {
          cloverTokenHandler(result.token);
          // alert(result.token);
        }
      }).catch(function (data) {
        console.log(data);
      });
  });

  const paymentReqData = {
    total: {
      amount: 99
    },
    options: {
      button: {
        buttonType: 'long'
      }
    }
  };

  // const paymentRequest = clover.paymentRequest(paymentReqData);
  const paymentRequestButton = elements.create('PAYMENT_REQUEST_BUTTON', {
    paymentReqData
  });
  paymentRequestButton.mount('#payment-request-button');
  // Check the availability of the Payment Request API first.
  // paymentRequest.canMakePayment().then(function(result) {
  //     if (result) {
  //       paymentRequestButton.mount('#payment-request-button');
  //     } else {
  //       document.getElementById('payment-request-button').style.display = 'none';
  //     }
  //   });
  paymentRequestButton.addEventListener('paymentMethod', function (ev) {
    console.log(JSON.stringify(ev));
  })

  // Submit the form with the token ID.
  function cloverTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'cloverToken');
    hiddenInput.setAttribute('value', token);
    form.appendChild(hiddenInput);
    // Submit the form
    form.submit();
  }

</script> -->
<!-- 
<script >
  $(function(){
  
   function createLink(url){
    const link = document.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("href", url);
    document.body.appendChild(link);
   }
  
   function loadCallback(){
    window['jinyuanPay_stripe'] = Stripe("<? $=stripe_pub_key ?>");
    window['jinyuanPay_stripe_return_url'] = "<?= $url_return ?>";
    window['jinyuanPay_clientSecret'] = "<?= $client_secret ?>";
    
    window['jinyuanPay_this_website_orderid'] = "<?= $order_id ?>";
    window['jinyuanPay_this_payment_jiekou_id'] = "<?= $stid_choose ?>";
    window['jinyuanPay_this_payment_url'] = "<?= $this_main_url ?>";
    window['jinyuanPay_this_payment_tradeno'] = "<?=$new_id?>"; //交易流水号
   }
  
   createLink("<?= $this_main_url_http_base ?>/cssjs/stripe_submit_mode_stripe_ainner.css")
   $.createScript('https://js.stripe.com/v3/',function(){
      loadCallback()
      $.createScript('<?= $this_main_url_http_base ?>/cssjs/stripe_submit_mode_stripe_ainner_shopyy.js?v=<?= date('YmdHis') ?>')
   })
  })
  
  </script> -->





<div id="stripe-payment-element">
  <!--Stripe.js injects the Payment Element-->
</div>

<button id="btnSubmitOrder">
  <div class="spinner hidden" id="stripe-spinner"></div>
  <span id="button-text">Pay now</span>
</button>


<div id="stripe-payment-message" class="hidden"></div>


<input type="hidden" name="jinyuanPay_stripe_payment_method" value="stripe_inner" />
<input type="hidden" name="jinyuanPay_stripe_payment_jiekou_id" value="1081" />
<input type="hidden" name="jinyuanPay_stripe_payment_domain" value="www9.vivifashion.top" />
<input type="hidden" name="jinyuanPay_stripe_payment_tradeno" value="86" />
<input type="hidden" name="jinyuanPay_stripe_payment_orderid" value="TD00955" />


<script>
  $(function() {

    function createLink(url) {
      const link = document.createElement("link");
      link.setAttribute("rel", "stylesheet");
      link.setAttribute("href", url);
      document.body.appendChild(link);
    }

    function loadCallback() {
      window['jinyuanPay_stripe'] = Stripe("pk_test_51KRXfLEVwZkBLOcoYKSFmIWaL3t1DH5FxMShnq1123WWKZQMdBZmNZe0liDypdJuucYJ6BdXVZftWmhyccg43dpn00M8LNO6Px");
      window['jinyuanPay_stripe_return_url'] = "https://www9.vivifashion.top/stripe/stripe_finish.php?id=86";
      window['jinyuanPay_clientSecret']= "pi_3O9kYPEVwZkBLOco1j8gPr3I_secret_k5rSRZPyp603hdHQme5mIsjse";

      window['jinyuanPay_this_website_orderid']= "TD00955";
      window['jinyuanPay_this_payment_jiekou_id']= "1081";
      window['jinyuanPay_this_payment_url']= "www9.vivifashion.top";
      window['jinyuanPay_this_payment_tradeno']= "86"; //交易流水号
    }

    createLink("https://www9.vivifashion.top/stripe/cssjs/stripe_submit_mode_stripe_ainner.css")
    $.createScript('https://js.stripe.com/v3/', function() {
      loadCallback()
      $.createScript('https://www9.vivifashion.top/stripe/cssjs/stripe_submit_mode_stripe_ainner_shopyy.js?v=20231107162234', function() {
        elements = jinyuanPay_stripe.elements({
          clientSecret:jinyuanPay_clientSecret
        });
        const paymentElement = elements.create("payment", {
            layout: "accordion",
            paymentMethodOrder: ['card', 'apple_pay', 'google_pay']
        });
        paymentElement.mount("#stripe-payment-element");
      })
    })
  })
</script>